{% extends "website/base.html" %}
{% load static %}
{% block content %}

<section class="section ths-booking-page">
  <div class="card">
    <div class="card-title" style="align-items:flex-start">
      <div class="icon">🩺</div>
      <div>
        <h1 class="h2" style="margin:0">Book a Telehealth Consultation</h1>
        <p class="p" style="margin-top:6px">
          Choose a provider and pick an available slot from our calendar. Then submit your details.
        </p>
        {% if PAYSTACK_TELEHEALTH_FEE_NGN and PAYSTACK_TELEHEALTH_FEE_NGN|add:0 > 0 %}
          <div class="badge" style="margin-top:8px">Consultation fee: ₦{{ PAYSTACK_TELEHEALTH_FEE_NGN }}</div>
        {% endif %}
      </div>
    </div>

    <div class="care-visual" aria-label="Healthcare visual preview">
      <div class="care-visual-controls" role="group" aria-label="Choose visual style">
        <button type="button" class="btn" id="photoView" aria-pressed="true">Photo view</button>
        <button type="button" class="btn" id="illustrationView" aria-pressed="false">Illustration view</button>
      </div>
      <div id="carePhoto"><img src="{% static 'website/img/services/home_nursing_photo.jpg' %}" alt="Illustrative home nursing care photograph" loading="lazy"></div>
      <div id="careIllustration" hidden role="img" aria-label="Illustration of coordinated telehealth care"><span aria-hidden="true">🩺</span><strong>Professional care, wherever you are</strong><span>Choose a provider • Select a time • Book securely</span></div>
    </div>
    <style>
      .care-visual{margin:18px 0}.care-visual-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.care-visual-controls button[aria-pressed="true"]{background:#075e58!important;color:#fff!important;border-color:#075e58!important}
      #carePhoto img{display:block;width:100%;height:clamp(150px,22vw,270px);object-fit:cover;border-radius:16px}
      #careIllustration:not([hidden]){min-height:180px;border-radius:16px;background:linear-gradient(125deg,#e0f3ef,#f0f6fc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:18px;color:#104f50}
      #careIllustration span:first-child{font-size:42px}#careIllustration strong{font-size:clamp(18px,3vw,27px)}
    </style>
    <script>document.addEventListener('DOMContentLoaded',function(){const photo=document.getElementById('carePhoto'),ill=document.getElementById('careIllustration'),p=document.getElementById('photoView'),i=document.getElementById('illustrationView');function set(mode){photo.hidden=mode!=='photo';ill.hidden=mode!=='illustration';p.setAttribute('aria-pressed',String(mode==='photo'));i.setAttribute('aria-pressed',String(mode==='illustration'));}p.addEventListener('click',()=>set('photo'));i.addEventListener('click',()=>set('illustration'));});</script>
    {% if form.non_field_errors %}
      <div class="help" style="color:#b91c1c;font-weight:800;margin-top:10px">{{ form.non_field_errors }}</div>
    {% endif %}

    <div class="sep"></div>

    <form method="post" id="bookingForm">
      {% csrf_token %}

      <div class="grid grid-2">
        <div>
          <label class="label">Full name</label>
          {{ form.full_name }}
        </div>
        <div>
          <label class="label">Phone</label>
          {{ form.phone }}
        </div>
      </div>

      <div class="grid grid-2">
        <div>
          <label class="label">Email (optional)</label>
          {{ form.email }}
        </div>
        <div>
          <label class="label">Consultation mode</label>
          {{ form.consultation_mode }}
        </div>
      </div>

      {{ form.slot_id }}
      {% if not providers %}<p role="status" class="ths-booking-notice">Consultations are not currently available online because no clinician has been activated. Please contact the care team. Staff can activate a verified clinician under <strong>Admin → Telehealth providers</strong>.</p>{% endif %}

      <div class="sep"></div>

      <div class="grid grid-2">
        <div class="card" style="padding:14px">
          <div class="small" style="font-weight:900;margin-bottom:8px">1) Choose provider</div>
          <select id="providerSelect" class="input">
            <option value="">All providers</option>
            {% for p in providers %}
              <option value="{{ p.id }}">{{ p.full_name }}{% if p.specialization %} — {{ p.specialization }}{% endif %}</option>
            {% endfor %}
          </select>

          <div style="height:10px"></div>

          <div class="small" style="font-weight:900;margin-bottom:8px">2) Date range</div>
          <div class="ths-range-controls" role="group" aria-label="Appointment date range">
            <button type="button" class="btn" id="next7" aria-pressed="true">Next 7 days</button>
            <button type="button" class="btn" id="next14" aria-pressed="false">Next 14 days</button>
            <button type="button" class="btn" id="next30" aria-pressed="false">Next 30 days</button>
          </div>

          <div class="help" style="margin-top:10px">
            If your preferred appointment time is unavailable, please contact our team for assistance.
          </div>
        </div>

        <div class="card" style="padding:14px">
          <div class="small" style="font-weight:900;margin-bottom:8px">3) Pick a slot</div>

          <div id="slotsBox" class="card" role="status" aria-live="polite" style="padding:12px;background:rgba(0,0,0,.03)">
            <div class="small">Loading available slots…</div>
          </div>

          <div id="selectedSlot" class="help" style="margin-top:10px;font-weight:800"></div>
        </div>
      </div>

      <div style="margin-top:12px">
        <label class="label">Symptoms / reason (optional)</label>
        {{ form.symptoms_or_reason }}
      </div>

      <div class="sep"></div>

      <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
        <button class="btn btn-accent" type="submit" id="submitBtn" disabled>Submit booking</button>
        <a class="btn" href="https://wa.me/{{ SITE_WHATSAPP }}" target="_blank">Chat on WhatsApp</a>
        <div class="small" id="bookingHint">Select an available slot before submitting.</div>
      </div>
    </form>
  </div>
</section>

<script>
(function(){
  const slotsApi = "{% url 'website:telehealth_slots_api' %}";
  const providerSelect = document.getElementById('providerSelect');
  const slotsBox = document.getElementById('slotsBox');
  const slotIdInput = document.getElementById('id_slot_id');
  const selectedSlot = document.getElementById('selectedSlot');
  const submitBtn = document.getElementById('submitBtn');
  const hint = document.getElementById('bookingHint');
  const ranges = [[7,'next7'],[14,'next14'],[30,'next30']];
  let activeRequest = null;
  let requestSequence = 0;
  if (!slotsBox || !slotIdInput || !submitBtn || !providerSelect) return;

  function isoDate(d){
    const local = new Date(d.getTime() - d.getTimezoneOffset()*60000);
    return local.toISOString().slice(0,10);
  }
  function clearSelection(){
    slotIdInput.value = '';
    submitBtn.disabled = true;
    selectedSlot.textContent = '';
    hint.textContent = 'Select an available slot before submitting.';
  }
  function notice(text){
    slotsBox.replaceChildren();
    const node = document.createElement('p');
    node.className = 'small ths-slot-message';
    node.textContent = text;
    slotsBox.appendChild(node);
  }
  function loadSlots(days){
    clearSelection();
    ranges.forEach(([n,id]) => {
      const button = document.getElementById(id);
      button.setAttribute('aria-pressed', String(days === n));
    });
    const seq = ++requestSequence;
    if (activeRequest) activeRequest.abort();
    activeRequest = new AbortController();
    const from = new Date();
    const to = new Date();
    to.setDate(to.getDate() + days - 1);
    const params = new URLSearchParams({from:isoDate(from),to:isoDate(to)});
    if (providerSelect.value) params.set('provider',providerSelect.value);
    notice('Checking available appointments for the next ' + days + ' days…');
    fetch(slotsApi + '?' + params, {signal:activeRequest.signal,headers:{'Accept':'application/json'}})
      .then(async response => {
        const data = await response.json();
        if (!response.ok) throw new Error(data.error || 'The appointment service is temporarily unavailable.');
        return data;
      })
      .then(data => {
        if (seq !== requestSequence) return;
        const slots = Array.isArray(data.slots) ? data.slots : [];
        slotsBox.replaceChildren();
        if (!slots.length){
          notice({7:'No appointments in the next 7 days.',14:'No appointments in the next 14 days.',30:'No appointments in the next 30 days.'}[days] +
            ' ' + (providerSelect.options.length <= 1 ? 'No active clinicians are configured yet. Please contact our care team.' : 'Try another clinician or contact our care team.'));
          return;
        }
        const list = document.createElement('div');
        list.className = 'ths-slot-list';
        slots.forEach(slot => {
          const start = new Date(slot.start_at);
          const end = new Date(slot.end_at);
          if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) return;
          const label = start.toLocaleString(undefined,{weekday:'short',year:'numeric',month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'}) +
            ' – ' + end.toLocaleTimeString(undefined,{hour:'2-digit',minute:'2-digit'});
          const provider = [slot.provider,slot.specialization].filter(Boolean).join(' • ');
          const button = document.createElement('button');
          button.type = 'button'; button.className = 'btn ths-slot-choice';
          button.setAttribute('aria-pressed','false');
          const title = document.createElement('strong');title.textContent = label;
          const detail = document.createElement('span');detail.className='small';detail.textContent=provider;
          button.append(title,detail);
          button.addEventListener('click',()=>{
            slotIdInput.value = String(slot.id);
            selectedSlot.textContent = 'Selected: ' + label + ' — ' + provider;
            list.querySelectorAll('button').forEach(b => b.setAttribute('aria-pressed',String(b === button)));
            submitBtn.disabled = false;
            hint.textContent = 'Appointment selected. Complete your details and submit.';
          });
          list.appendChild(button);
        });
        slotsBox.appendChild(list);
      })
      .catch(error => {
        if (error.name === 'AbortError' || seq !== requestSequence) return;
        notice('Unable to load appointments: ' + error.message + ' Please retry.');
      });
  }
  ranges.forEach(([days,id])=>document.getElementById(id).addEventListener('click',()=>loadSlots(days)));
  providerSelect.addEventListener('change',()=>loadSlots(7));
  document.getElementById('bookingForm').addEventListener('submit',event=>{
    if (!slotIdInput.value){event.preventDefault();hint.textContent='Please select an available appointment before submitting.';}
  });
  loadSlots(7);
})();
</script>

{% endblock %}